<template>
    <div>
        
        <div class="content">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" >

                <el-form-item label="用户名" class="form-header">
                    <el-select
                    :disabled="disableds"
                      v-model="form.userId"
                      placeholder="请选择"
                      class="slect"
                      @change="getChange"
                    >
                      <el-option
                        v-for="item in userList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                <el-form-item label="项目类型" class="form-header">
                  <el-select
                      v-model="form.componentType"
                      placeholder="请选择"
                      class="slect"
                   
                    >
                      <el-option
                        v-for="item in userList2"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="消费" class="form-header">
                <el-input v-model="form.consumption" placeholder="消费"></el-input>
            </el-form-item>
          <el-form-item label="展现" class="form-header">
            <el-input v-model="form.toShow" placeholder="展现"></el-input>
        </el-form-item>
        <el-form-item label="点击" class="form-header">
            <el-input v-model="form.click" placeholder="点击"></el-input>
        </el-form-item>
        <el-form-item label="推广设备" class="form-header">
            <el-select
                v-model="form.promotionDevice"
                placeholder="请选择"
                class="slect"
             
              >
                <el-option
                  v-for="item in userList3"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
          </el-form-item>
        <el-form-item label="推广计划" class="form-header">
            <el-input v-model="form.promotionPlan" placeholder="推广计划"></el-input>
        </el-form-item>
        <el-form-item label="推广单元" class="form-header">
            <el-input v-model="form.promotionUnit" placeholder="推广单元"></el-input>
        </el-form-item>
        <el-form-item label="点击区域" class="form-header">
            <el-select
                v-model="form.clickRegion"
                placeholder="请选择"
                class="slect"
             
              >
                <el-option
                  v-for="item in userList1"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
          </el-form-item>
              </el-form>
        </div>
        <div class="queding">
          <div><el-button type="primary" v-if="!productId" @click="btnQue">确定</el-button></div>
          <div><el-button type="primary" v-if="productId" @click="btnQue2">确定</el-button></div>
          <div><el-button type="primary" plain @click="btnQuxiao">取消</el-button></div>
        </div>
    </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import {add,edit} from '@/api/shuju/zujian'
export default{
    name:'zhanghugai',
    data(){
        return{
            userList1:[
                {
                name:'整个广告'
                },
                {
                name:'仅限组件'
                },
            ],
          disableds:false,
          userList2:[
            {
              name:'图片类'
            },
            {
              name:'营销类'
            },
            {
              name:'文字类'
            },
            {
              name:'本地类'
            },
            {
              name:'视频类'
            },
            {
              name:'商品类'
            },
            {
              name:'应用类'
            },
          ],
          userList3:[
            {
              name:'移动'
            },
            {
              name:'计算机'
            },
          ],
            userList:[],
          
            productId:"",
            value:"",
          
            form:{
              userName:"",
              userId:"",
              componentType:"",
              consumption:"",
              toShow:"",
              click:"",
              promotionDevice:"",
              promotionPlan:"",
              promotionUnit:"",
              clickRegion:"",
            },
          
            formInline:{}
        }
    },
    props:{
        objDate2: {
        type: Object,
        default: () => {},
      },
    },
    mounted() {
        this.getList()
        if(this.objDate2){
            this.form=this.objDate2
            this.productId=this.objDate2.userId
        }
        if(this.productId){
          this.disableds=true
        }
    },
    methods: {
        //选择
        getChange(e){
           
           for(let item of  this.userList){
               if(e == item.userId){
                   this.form.userName=item.userName
               }
           }
           console.log('选择', this.form.userName)
       },
         /** 查询用户列表 */
    getList() {
      listAllUser({}).then((res) => {
        res.data.forEach((item) => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId,
          });
        });
      });
    },
        //修改
        btnQue2(){
            edit(this.form).then((res)=>{
                if(res.code ==200){
                    this.$message({
                    message: res.msg,
                    type: 'success'
                    });
                    this.btnQuxiao()
                }
            })
        },
        //确定
        btnQue(){
            add(this.form).then((res)=>{
                if(res.code ==200){
                    this.$message({
                    message: res.msg,
                    type: 'success'
                    });
                    this.btnQuxiao()
                }
            })
        },
      btnQuxiao(){
        this.$emit('quxiao')
      }
    },
}
</script>
<style scoped>
.queding{
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;

}
.form-header{
    width: 430px;
    border: none;
}
.slect{
    width: 204px;
}
.content{
   width: 90%;
   margin: 0 auto;
   margin-top: 30px;
}
</style>